<template>
  <!-- 字典表单弹窗 -->
  <Modal :modelValue="modelValue" :title="title" @close="handleCloseDialog" @open="handleOpenDialog" width="500px"
    maxHeight="auto">
    <el-form ref="DictDetailFormRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="字典标签" prop="label">
        <el-input v-model="form.label" placeholder="请输入字典名称" />
      </el-form-item>
      <el-form-item label="字典值" prop="value">
        <el-input v-model="form.value" placeholder="请输入字典值" />
      </el-form-item>
      <el-form-item label="排序" prop="dict_sort">
        <el-input-number v-model="form.dict_sort" controls-position="right" style="width: 100%" :min="0" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="modal-footer">
        <el-button type="primary" @click="handleSubmit" :loading="loading" :disabled="loading">确 定</el-button>
        <el-button @click="handleCloseDialog">取 消</el-button>
      </div>
    </template>
  </Modal>
</template>

<script setup lang="ts">

import DictDetailAPI, { DictDetailVO, DictDetailForm } from '@/api/dict-detail';

// 定义接收的属性
interface Props {
  modelValue: boolean
  selectedItem?: DictDetailVO
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  title: '表单',
})

// 自定义事件
const emit = defineEmits<{
  submit: [formData: DictDetailForm]
  close: []
}>()

const DictDetailFormRef = ref(ElForm)

const loading = ref(false)

const form = ref<DictDetailForm>({})

const rules = reactive({
  label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
  value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
})

//获取表单数据
const getFormData = (id: number) => {
  // 调用接口获取字典信息
  DictDetailAPI.getFormData(id).then((res) => {
    if (res.status === 200) {
      Object.assign(form.value, res.data)
    }
  })
}
const handleOpenDialog = () => {

}

const handleCloseDialog = () => {
  resetForm()
  emit('close')
}

const submitClick = (data: any) => {
  resetForm()
  emit('submit', data)
}

const resetForm = () => {
  if (DictDetailFormRef.value) {
    DictDetailFormRef.value.resetFields()
    DictDetailFormRef.value.clearValidate()
  }
  form.value = {}
}
const handleSubmit = () => {
  DictDetailFormRef.value.validate((valid: any) => {
    if (valid) {
      if (form.value.detail_id) {
        updateData()
      } else {
        saveData()
      }
    }
  })
}

const saveData = () => {
  loading.value = true
  DictDetailAPI.add(form.value).then((res) => {
    if (res.status === 200) {
      ElMessage.success("新增成功")
      submitClick(res.data)
    }
  }).finally(() => {
    loading.value = false
  })
}
const updateData = () => {
  loading.value = true
  DictDetailAPI.update(form.value).then((res) => {
    if (res.status === 200) {
      ElMessage.success("修改成功")
      submitClick(res.data)
    }
  }).finally(() => {
    loading.value = false
  })
}


//表单传递数据
watch(() => props.selectedItem, (newVal: any, oldVal) => {
  if (props.selectedItem && props.selectedItem.detail_id) {
    getFormData(props.selectedItem.detail_id)
  } else {
    form.value = Object.assign(newVal, {})
  }
}, { immediate: true, deep: true })



</script>
